<template>
	<view>
		<div class="top">
			<img class="bg-top" src="../static/bg-top.png" alt="bg">
			<p>{{villageName}}</p>
			<img src="../static/logo.png" alt="logo" class="logo">

			<div class="time-weather">
				<div class="time-box time-box-after">
					<div class="time">{{ time }}</div>
					<div class="date">{{ date }}</div>
				</div>
				<div class="weather-box">
					<div class="weather">{{ weather }}</div>
					<div class="temperature">{{ temperature }}</div>
				</div>
			</div>
		</div>
		<div class="nav-data-list">
			<img src="../static/decorate-left.png" alt="decorate" class="decorate">
			<div class="nav-data-item">
				<div>月卡用户</div>
				<div class="blue">{{homeTopData.monthCardUser}}</div>
				<div>
					<div>黑名单：<text class="blue">{{homeTopData.blackList}}</text></div>
					<div>白名单：<text class="blue">{{homeTopData.whiteList}}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月临停实收总额(元)</div>
				<div class="orange">{{homeTopData.monthStop}}</div>
				<div>
					<div>数量：<text class="blue">{{homeTopData.monthStopCar}}</text></div>
					<div>较上月：<text
							:class="{'green':homeTopData.compareMonthStopRate>=0,'red':homeTopData.compareMonthStopRate<0}">{{homeTopData.compareMonthStopRate}}%</text>
					</div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>今日巡更</div>
				<div class="blue">{{homeTopData.todayXG}}</div>
				<div>
					<div>本周巡更：<text class="blue">{{homeTopData.weekXG}}</text></div>
					<div>本月巡更：<text class="blue">{{homeTopData.monthXG}}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月日常查处</div>
				<div class="blue">{{homeTopData.monthInv}}</div>
				<div>
					<div>待指派：<text class="orange">{{homeTopData.monthInv_ZP}}</text></div>
					<div>跟进中：<text class="white">{{homeTopData.monthInv_GJ}}</text></div>
					<div>已完成：<text class="blue">{{homeTopData.monthInv_WC}}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月投诉建议</div>
				<div class="blue">{{homeTopData.monthSugg}}</div>
				<div>
					<div>待指派：<text class="orange">{{homeTopData.monthSugg_ZP}}</text></div>
					<div>跟进中：<text class="white">{{homeTopData.monthSugg_GJ}}</text></div>
					<div>已完成：<text class="blue">{{homeTopData.monthSugg_WC}}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月逃欠金额(元)</div>
				<div class="yellow">{{homeTopData.debtAmount}}</div>
				<div>
					<div>逃费次数：<text class="blue">{{homeTopData.dodgeFeeCount}}</text></div>
					<div>逃费金额：<text class="blue">¥{{homeTopData.dodgeFee}}</text></div>
				</div>
			</div>
			<img src="../static/decorate-right.png" alt="decorate" class="decorate">
		</div>

		<div class="rcgl-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div style="display: flex;align-items: center;" @click.stop="openWindows(1)">
					<div>日常管理</div>
					<div v-if="dateOverdueList.length != 0" class="box-title-tip blink" @click.stop="openWindows(2)">
						<div class="box-title-error ">!</div>您有<span
							class="box-title-num">{{dateTotal}}</span>条日常查处工单已逾期
					</div>
				</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="rcgl-nav-list">
					<div class="rcgl-nav-item">
						<img src="../static/icon-08.png" alt="icon" class="icon">
						<div class="dark-blue">{{rcglHeadData.todayCount}}</div>
						<div>今日查处</div>
					</div>
					<div class="rcgl-nav-item">
						<img src="../static/icon-08.png" alt="icon" class="icon">
						<div class="dark-blue">{{rcglHeadData.weekCount}}</div>
						<div>本周查处</div>
					</div>
					<div class="rcgl-nav-item">
						<img src="../static/icon-08.png" alt="icon" class="icon">
						<div class="dark-blue">{{rcglHeadData.monthCount}}</div>
						<div>本月查处</div>
					</div>
				</div>

				<div class="rcgl-echart-list">
					<div id="tsjy-echart-left" ref="rcglEchartLeft"></div>
					<div id="tsjy-echart-right" ref="rcglEchartRight"></div>
				</div>

				<div class="select-time-type">
					<div :class="{'selected-time-type':showRcglYearMonth}" @click="showRcglYearMonthFn(true)">月度</div>
					<div :class="{'selected-time-type':!showRcglYearMonth}" @click="showRcglYearMonthFn(false)">年度</div>
				</div>

				<div class="select-time" style="top: 37.77vh;" v-if="showRcglYearMonth">
					<div @click="showRcglTimeFn">
						<block v-if="!showRcglTime">{{yearList[rcglTime[0]]}}年{{monthList[rcglTime[1]]}}月</block>
						<block v-if="showRcglTime">确定</block>
					</div>
					<div @click="showRcglTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showRcglTime"
						:value="rcglTime" @change="changeRcglTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{ item }}月</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div class="select-time" style="top: 37.77vh;" v-if="!showRcglYearMonth">
					<div @click="showRcglTimeFn">
						<block v-if="!showRcglTime">{{yearList[rcglTime[0]]}}年</block>
						<block v-if="showRcglTime">确定</block>
					</div>
					<div @click="showRcglTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showRcglTime"
						:value="rcglTime" @change="changeRcglTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item" style="width: 100%;">{{ item }}年</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div id="rcgl-echart-right" ref="rcglEchartBottom"></div>
			</div>
		</div>

		<div class="clll-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>车辆流量</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="main-data-list">
					<div>
						<div class="blue">{{clllEchartHear.monthInCount}}</div>
						<div>本月入场数</div>
					</div>
					<div>
						<div class="blue">{{clllEchartHear.monthOutCount}}</div>
						<div>本月出场数</div>
					</div>
					<div>
						<div class="orange">{{clllEchartHear.practicalAmount}}</div>
						<div>本月实收金额</div>
					</div>
					<div>
						<div class="yellow">{{clllEchartHear.discountsAmount}}</div>
						<div>本月优惠金额</div>
					</div>
				</div>
				<div class="select-time">
					<div @click="showClllTimeFn">
						<block v-if="!showClllTime">{{yearList[clllTime[0]]}}年{{monthList[clllTime[1]]}}月</block>
						<block v-if="showClllTime">确定</block>
					</div>
					<div @click="showClllTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showClllTime"
						:value="clllTime" @change="changeClllTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{ item }}月</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div id="clll-echart" ref="clllEchart"></div>
			</div>
		</div>

		<div class="tsjy-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div style="display: flex;align-items: center;">
					<div>投诉建议</div>
					<div v-if="overdueList.length != 0" class="box-title-tip blink" @click.stop="openWindows(1)">
						<div class="box-title-error ">!</div>您有<span class="box-title-num">{{total}}</span>条投诉建议工单已逾期
					</div>
				</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div style="display: flex;justify-content: flex-start;align-items: center;">
				<div class="box-main">
					<div class="main-data-list" style="padding-left: 1vw;">
						<!-- <div>
							<div class="dark-blue">{{tsjyHeadData.total}}</div>
							<div>总数</div>
						</div> -->
						<div>
							<div class="orange">{{tsjyHeadData.assigned}}</div>
							<div>待指派</div>
						</div>
						<div>
							<div class="white">{{tsjyHeadData.followUp}}</div>
							<div>跟进中</div>
						</div>
						<div>
							<div class="blue">{{tsjyHeadData.finish}}</div>
							<div>已完成</div>
						</div>
						<div>
							<div class="red">{{tsjyHeadData.overdue}}</div>
							<div>已逾期</div>
						</div>
					</div>

					<div id="rcgl-echart-left" ref="tsjyEchartLeft"></div>


				</div>
				<div class="box-main" style="width: 32vw;">
					<div class="tsjy-swiper-nav" style="margin-top: 2vh;">
						<div>序号</div>
						<div>分类名称</div>
						<div>车牌号码</div>
						<div>内容描述</div>
						<div>创建时间</div>
						<div>状态</div>
					</div>

					<swiper class="tsjy-swiper" :indicator-dots="false" :autoplay="true" :interval="3000"
						:duration="1000" :vertical="true" display-multiple-items="6">
						<swiper-item v-for="(item,index) of swiperList">
							<view class="swiper-item">
								<div>{{item.number}}</div>
								<div>{{item.sunTypeName}}</div>
								<div>{{item.carNumber?item.carNumber:'--'}}</div>
								<div>{{item.content}}</div>
								<div>{{item.createTime}}</div>
								<div
									:class="{'orange':item.statusName=='待指派','blue':item.statusName=='已完成','white':item.statusName=='跟进中','red':item.statusName=='已逾期'}">
									{{item.statusName}}
								</div>
							</view>
						</swiper-item>
					</swiper>
				</div>
			</div>
		</div>

		<img src="../static/bg-bottom.png" alt="bottom" class="bottom-img">

		<div v-if="detailStatus" class="maskLayer" @click.stop="detailStatus = false">
			<div class="maskLayer-detail" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>{{openType == 1 ? '投诉建议逾期列表' : '日常查处逾期列表'}}</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="detailStatus = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- list -->
				<div class="maskLayer-detail-list">
					<div class="maskLayer-detail-title">
						<div>序号</div>
						<div>村委名称</div>
						<div>工单编号</div>
						<div>分类名称</div>
						<div>内容</div>
						<div>指派时间</div>
						<div>预计完成时间</div>
						<div>处理人</div>
						<div>状态</div>
					</div>
					<div class="maskLayer-list-box">
						<div v-for="(item,index) in overdueList" :key="index" class="maskLayer-detail-title"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{index + 1}}</div>
							<div>{{item.villageName}}</div>
							<div>{{item.code}}</div>
							<div>{{item.subTypeName}}</div>
							<div>{{item.content}}</div>
							<div>{{item.assignedTime}}</div>
							<div>{{item.planCompleteTime}}</div>
							<div>{{item.handlerName}}</div>
							<div style="color: #FD5421;">已逾期</div>
						</div>
					</div>
					
				</div>
				<!-- 分页 -->
				<view class="pages-box">
					<view class="pages">
						<view class="pages-total">共{{total}}个结果</view>
						<Pagination class=" hoverClass" :total="total" :pageSize="pageSize" :nowPage="nowPage"
							@change="change">
						</Pagination>
						<view class="pagesSize">
							<view class="">前往</view>
							<input type="number" v-model="nowPageNum" @confirm="changeSearch()">
							<view class="">页</view>
						</view>
					</view>
				</view>
			</div>
		</div>


		<div v-if="detailDateStatus" class="maskLayer" @click.stop="detailDateStatus = false">
			<div class="maskLayer-detail" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>{{openType == 1 ? '投诉建议逾期列表' : '日常查处逾期列表'}}</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="detailDateStatus = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- list -->
				<div class="maskLayer-detail-list">
					<div class="maskLayer-detail-title">
						<div>序号</div>
						<div>村委名称</div>
						<div>工单编号</div>
						<div>分类名称</div>
						<div>内容</div>
						<div>指派时间</div>
						<div>预计完成时间</div>
						<div>处理人</div>
						<div>状态</div>
					</div>
					<div class="maskLayer-list-box">
						<div v-for="(item,index) in dateOverdueList" :key="index" class="maskLayer-detail-title"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{index + 1}}</div>
							<div>{{item.villageName}}</div>
							<div>{{item.code}}</div>
							<div>{{item.subTypeName}}</div>
							<div>{{item.content}}</div>
							<div>{{item.assignedTime}}</div>
							<div>{{item.planCompleteTime}}</div>
							<div>{{item.handlerName}}</div>
							<div style="color: #FD5421;">已逾期</div>
						</div>
					</div>
				</div>
				<view class="pages-box">
					<view class="pages">
						<view class="pages-total">共{{dateTotal}}个结果</view>
						<Pagination class=" hoverClass" :total="dateTotal" :pageSize="datePageSize"
							:nowPage="dateNowPage" @change="dateChange">
						</Pagination>
						<view class="pagesSize">
							<view class="">前往</view>
							<input type="number" v-model="dateNowPageNum" @confirm="dateChangeSearch()">
							<view class="">页</view>
						</view>
					</view>
				</view>
			</div>
		</div>

	</view>
</template>

<script>
	import * as echart from 'echarts'
	import '@/static/echarts-tooltip-carousel.js'
	import Pagination from "@../../components/bwm-pagination/bwm-pagination.vue" // 分页组件
	let clllEchartTools = null
	let tsjyEchartTools = null
	let rcglEchartRightTools = null
	export default {
		components: {
			Pagination,
		},
		data() {
			return {
				sensitive: 0,
				openType: 0,
				url: getApp().globalData.url,
				
				villageName: '',
				// ----- 投诉逾期分页 ----- //
				overdueList: [],
				detailStatus: false, // 详情状态
				total: 0, // 项目列表总页数
				pageSize: 10, // 项目列表每页条数
				nowPage: 1, // 项目列表当前页码
				nowPageNum: 1, // 项目列表当前页码
				// ----- 日常逾期分页 ----- //
				dateOverdueList: [],
				detailDateStatus: false, // 详情状态
				dateTotal: 0, // 项目列表总页数
				datePageSize: 10, // 项目列表每页条数
				dateNowPage: 1, // 项目列表当前页码
				dateNowPageNum: 1, // 项目列表当前页码


				time: '',
				date: '',
				weather: '',
				temperature: '',
				showVillageList: false,
				selectVillageIndex: 0,
				villageId: 0,
				villageList: [],
				yearList: [],
				monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				homeTopData: {},

				showRcglTime: false,
				showRcglYearMonth: true,
				rcglTime: [9, 0],
				rcglHeadData: {},
				rcglEchartLeft: null,
				rcglEchartLeftOption: {
					tooltip: {
						confine: true,
						extraCssText: 'z-index: 888',
						trigger: 'item',
						formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
						backgroundColor: 'rgba(0,21,43,0.8)',
						borderColor: 'rgba(221,247,255,0.4)',
						padding: [4, 8],
						borderWidth: 1,
						borderRadius: 4,
						textStyle: {
							color: '#DDF7FF',
						},
					},
					legend: {
						top: 0,
						padding: [5, 20, 5, 5],
						data: ['待指派', '跟进中', '已完成', '已逾期', ],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
						name: '跟进状态',
						type: 'pie',
						radius: ['0%', '60%'],
						center: ['50%', '45%'],
						avoidLabelOverlap: false,
						labelLine: {
							show: true,
						},
						label: {
							show: true,
							formatter: '{b|{b}} {per|{d}%} ',
							rich: {
								b: {
									fontSize: 10,
									color: 'inherit',
								},
								per: {
									fontSize: 10,
									color: 'inherit',
								},
							},
						},
						data: [{
								value: 123,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								},
								label: {
									show: true,
								},
								labelLine: {
									show: true,
								},
							},
							{
								value: 123,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								},
								label: {
									show: true,
								},
								labelLine: {
									show: true,
								},
							},
							{
								value: 123,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								},
								label: {
									show: true,
								},
								labelLine: {
									show: true,
								},
							},
							// {
							// 	value: 123,
							// 	name: '已逾期',
							// 	itemStyle: {
							// 		color: '#FDDB21'
							// 	},
							// 	label: {
							// 		show: true,
							// 	},
							// 	labelLine: {
							// 		show: true,
							// 	},
							// },
						]
					}, ]
				},
				rcglEchartRight: null,
				rcglEchartRightOption: {
					tooltip: {
						confine: true,
						extraCssText: 'z-index: 888',
						trigger: 'item',
						formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
						backgroundColor: 'rgba(0,21,43,0.8)',
						borderColor: 'rgba(221,247,255,0.4)',
						padding: [4, 8],
						borderWidth: 1,
						borderRadius: 4,
						textStyle: {
							color: '#DDF7FF',
						},
					},
					legend: {
						top: 0,
						padding: [5, 20, 5, 5],
						// data: ['待指派', '跟进中', '已完成', '已逾期' ],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
						name: '违停类型',
						type: 'pie',
						radius: ['40%', '60%'],
						center: ['50%', '45%'],
						avoidLabelOverlap: false,
						labelLine: {
							show: true,
						},
						label: {
							show: true,
							formatter: '{b|{b}}\n {c|{c}}{per|({d}%)} ',
							rich: {
								b: {
									fontSize: 10,
									lineHeight: 14,
									color: 'inherit',
								},
								c: {
									fontSize: 10,
									lineHeight: 14,
									color: 'inherit',
									textAlign: 'left',
								},
								per: {
									fontSize: 8,
									color: 'inherit',
									textAlign: 'left',
								},
							},
						},
						data: [{
								value: 123,
								name: '逃费查处',
								itemStyle: {
									color: '#2BC5F3'
								}
							},
							{
								value: 123,
								name: '违停查处',
								itemStyle: {
									color: '#1D7AD9'
								}
							},
							{
								value: 123,
								name: '乱放行为',
								itemStyle: {
									color: '#6FB6FF'
								}
							},
							{
								value: 123,
								name: '乱停行为',
								itemStyle: {
									color: '#5852FF'
								}
							}
						]
					}]
				},
				rcglEchartBottom: null,
				rcglEchartBottomOption: {
					grid: {
						top: '20%',
						bottom: 40,
						left: 40,
						right: 20,
					},
					tooltip: {
						confine: true,
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						backgroundColor: 'rgba(0, 21, 43, 0.80)',
						borderColor: 'rgba(43,142,243,0.5)',
						// borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						},
					},
					legend: {
						top: 25,
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						data: [{
							name: '巡更次数',
							itemStyle: {
								color: '#2BC5F3'
							}
						}]
					},
					xAxis: {
						data: ['大岭村委', '凌岗村委', '濠头村委', '张家边张家边', '濠头村委', '凌岗村委'],
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							margin: 19,
							formatter: function(value) {
								let valueTxt = '';
								if (value.length > 4) {
									valueTxt = value.substring(0, 3) + '...';
								} else {
									valueTxt = value;
								}
								return valueTxt;
							}
						},
						axisLine: {
							lineStyle: {
								color: '#fff'
							}
						},
						axisTick: {
							show: false
						},
					},
					yAxis: {
						type: 'value',
						name: '单位:单',
						splitLine: {
							lineStyle: {
								color: 'rgba(204, 204, 204, .3)',
								type: 'dashed'
							}
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#fff'
							}
						},
						nameTextStyle: {
							color: '#fff',
							fontSize: 12
						},
					},
					series: [{
						name: '巡更次数',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					} ]
				},

				showClllTime: false,
				clllTime: [9, 0],
				clllEchart: null,
				clllEchartHear: {},
				clllEchartOption: {
					grid: {
						top: '40%',
						bottom: 30,
						left: 60,
						right: 60,
					},
					tooltip: {
						confine: true,
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						backgroundColor: 'rgba(0, 21, 43, 0.80)',
						borderColor: 'rgba(43,142,243,0.5)',
						// borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						},
					},
					legend: {
						top: '27%',
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						data: [{
							name: '入场数(辆)',
							itemStyle: {
								color: '#2BC5F3'
							}
						}, {
							name: '出场数(辆)',
							itemStyle: {
								color: '#1D7AD9'
							}
						}, {
							name: '实收金额(元)',
							itemStyle: {
								color: '#FD8F21'
							}
						}, {
							name: '优惠金额(元)',
							itemStyle: {
								color: '#FDDB21'
							}
						}]
					},
					xAxis: {
						data: ['1日', '2日', '3日', '4日', '5日', '6日'],
						axisLine: {
							lineStyle: {
								color: '#ccc'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						}
					},
					yAxis: [{
							type: 'value',
							name: '单位:辆',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#1D7AD9'
								}
							},
							splitLine: {
								lineStyle: {
									color: 'rgba(204, 204, 204, .3)',
									type: 'dashed'
								}
							},
							nameTextStyle: {
								color: '#fff',
								fontSize: 12
							},
							axisLabel: {
								color: '#fff',
								fontSize: 12,
							},
							// min: 0,
							// max: 250,
							// interval: 50,
							// axisLabel: {
							//   formatter: '{value} ml'
							// }
						},
						{
							type: 'value',
							name: '单位:元',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#AF6113'
								}
							},
							splitLine: {
								show: false,
							},
							nameTextStyle: {
								color: '#fff',
								fontSize: 12
							},
							axisLabel: {
								color: '#fff',
								fontSize: 12,
							}
							// min: 0,
							// max: 25,
							// interval: 5,
							// axisLabel: {
							//   formatter: '{value} °C'
							// }
						}
					],
					series: [{
							name: '入场数(辆)',
							type: 'bar',
							barGap: 0,
							data: [5, 20, 36, 10, 10, 20],
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: '出场数(辆)',
							type: 'bar',
							barGap: 0,
							data: [10, 40, 46, 20, 20, 30],
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(29, 122, 217, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: '实收金额(元)',
							type: 'line',
							symbol: 'circle',
							symbolSize: 4,
							yAxisIndex: 1,
							itemStyle: {
								color: 'rgba(253, 143, 33, 1)',
								borderWidth: 0,
							},
							lineStyle: {
								color: 'rgba(253, 143, 33, 1)',
							},
							data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, ]
						},
						{
							name: '优惠金额(元)',
							type: 'line',
							symbol: 'circle',
							symbolSize: 4,
							yAxisIndex: 1,
							itemStyle: {
								color: 'rgba(253, 219, 33, 1)',
								borderWidth: 0,
							},
							lineStyle: {
								color: 'rgba(253, 219, 33, 1)',
							},
							data: [4.0, 4.4, 6.6, 8.5, 12.3, 23.2, ]
						},
					],
				},

				showTsjyTime: false,
				tsjyTime: [9, 0],
				tsjyHeadData: {},
				tsjyEchartLeft: null,
				tsjyEchartLeftOption: {
					tooltip: {
						confine: true,
						extraCssText: 'z-index: 888',
						trigger: 'item',
						formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
						backgroundColor: 'rgba(0,21,43,0.8)',
						borderColor: 'rgba(221,247,255,0.4)',
						padding: [4, 8],
						borderWidth: 1,
						borderRadius: 4,
						textStyle: {
							color: '#DDF7FF',
						},
					},
					legend: {
						top: 35,
						padding: [5, 20, 5, 5],
						data: ['待指派', '跟进中', '已完成', '已逾期'],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
							name: '跟进状态',
							type: 'pie',
							radius: ['0%', '40%'],
							center: ['50%', '60%'],
							avoidLabelOverlap: false,
							labelLine: {
								show: false,
							},
							label: {
								show: false,
							},
							data: [{
									value: 0,
									name: '待指派',
									itemStyle: {
										color: '#FD8F21'
									}
								},
								{
									value: 0,
									name: '跟进中',
									itemStyle: {
										color: '#DDF7FF'
									}
								},
								{
									value: 0,
									name: '已完成',
									itemStyle: {
										color: '#26DDF2'
									}
								},
								{
									value: 0,
									name: '已逾期',
									itemStyle: {
										color: '#FD5421'
									}
								}
							]
						},
						{
							name: '违停类型',
							type: 'pie',
							radius: ['50%', '60%'],
							center: ['50%', '60%'],
							avoidLabelOverlap: false,
							tooltip: {
								confine: true,
								show: true,
							},
							labelLine: {
								show: true,
							},
							label: {
								show: true,
								formatter: '{b|{b}}\n {c|{c}}{per|({d}%)} ',
								rich: {
									b: {
										fontSize: 10,
										lineHeight: 14,
										color: 'inherit',
									},
									c: {
										fontSize: 10,
										lineHeight: 14,
										color: 'inherit',
										textAlign: 'left',
									},
									per: {
										fontSize: 8,
										color: 'inherit',
										textAlign: 'left',
									},
								},
							},
							data: [{
									value: 123,
									name: '逃费查处',
									itemStyle: {
										color: '#2BC5F3'
									}
								},
								{
									value: 123,
									name: '违停查处',
									itemStyle: {
										color: '#1D7AD9'
									}
								},
								{
									value: 123,
									name: '乱放行为',
									itemStyle: {
										color: '#6FB6FF'
									}
								},
								{
									value: 123,
									name: '乱停行为',
									itemStyle: {
										color: '#5852FF'
									}
								}
							]
						}
					]
				},
				swiperList: [],
			}
		},
		watch: {
			clllEchartOption: {
				handler(newValue, oldValue) {
					this.clllEchart.clear()
					this.clllEchart.setOption(newValue);
					if(clllEchartTools) {
						clllEchartTools.clearLoop(clllEchartTools.timeTicket)
					}
					clllEchartTools = tools.loopShowTooltip(this.clllEchart, newValue, {
						loopSeries: true
					});
				},
				deep: true
			},
			rcglEchartLeftOption: {
				handler(newValue, oldValue) {
					this.rcglEchartLeft.setOption(newValue);
				},
				deep: true
			},
			rcglEchartRightOption: {
				handler(newValue, oldValue) {
					this.rcglEchartRight.setOption(newValue);
					// tsjyEchartTools.clearLoop()
					// tsjyEchartTools = tools.loopShowTooltip(this.rcglEchartRight, this.rcglEchartRightOption, {
					// 	loopSeries: true
					// });
				},
				deep: true
			},
			tsjyEchartLeftOption: {
				handler(newValue, oldValue) {
					this.tsjyEchartLeft.setOption(newValue);
				},
				deep: true
			},
			rcglEchartBottomOption: {
				handler(newValue, oldValue) {
					this.rcglEchartBottom.setOption(newValue);
					if(rcglEchartRightTools) {
						rcglEchartRightTools.clearLoop(rcglEchartRightTools.timeTicket)
					}
					rcglEchartRightTools = tools.loopShowTooltip(this.rcglEchartBottom, this.rcglEchartBottomOption, {
						loopSeries: true
					});
				},
				deep: true
			},
		},
		onLoad() {
			this.sensitive = this.getQueryVariable('sensitive') ? this.getQueryVariable('sensitive') : 0
			const date = new Date()
			const year = date.getFullYear()
			for (let i = 0; i < 10; i++) {
				this.yearList = [year - i, ...this.yearList]
			}
			this.clllTime = [9, date.getMonth()]
			this.tsjyTime = [9, date.getMonth()]
			this.rcglTime = [9, date.getMonth()]

			this.getTime();
			setInterval(_ => {
				this.getTime();
			}, 10)
			this.getTemperature();
			
			// if(window.location.href.split('=').length == 2) {
			// 	this.villageId = Number(window.location.href.split('=')[1])
			// } else {
			// 	this.villageId = 25
			// }
			
			this.villageId = this.getQueryVariable('id')

			setTimeout(_ => {
				this.clllEchart = this.$echarts.init(this.$refs.clllEchart);

				this.rcglEchartLeft = this.$echarts.init(this.$refs.rcglEchartLeft);

				this.rcglEchartRight = this.$echarts.init(this.$refs.rcglEchartRight);

				this.tsjyEchartLeft = this.$echarts.init(this.$refs.tsjyEchartLeft);

				this.rcglEchartBottom = this.$echarts.init(this.$refs.rcglEchartBottom);
			}, 100)

			this.getData()
			this.getOverdueData(this.villageId, 1)
			this.getOverdueData(this.villageId, 2)

			// 监控页面大小变化更新页面
			uni.onWindowResize((res) => {
				this.$router.go(0)
			})
			
			setInterval(_=>{
				this.getData()
			},900000)
		},
		methods: {
			change(nowPage) { // 获取当前分页
				this.nowPage = nowPage;
				this.getOverdueData(this.villageId, 1);
			},
			changeSearch() { // 获取当前分页
				this.nowPage = parseInt(this.nowPageNum);
				this.getOverdueData(this.villageId, 1);
			},
			dateChange(nowPage) { // 获取当前分页
				this.dateNowPage = nowPage;
				this.getOverdueData(this.villageId, 2);
			},
			dateChangeSearch() { // 获取当前分页
				this.dateNowPage = parseInt(this.dateNowPageNum);
				this.getOverdueData(this.villageId, 2);
			},
			getData() {
				this.getGetProjList()
				this.getHomeTopData()
				this.getVehicleaccessData()
				this.getSuggestData()
				this.getInvestigateData()
				this.getPunchRecordData()
			},
			// 获取村委列表
			getGetProjList() {
				uni.request({
					url: this.url + '/largescreen/GetProjList?sensitive=' + this.sensitive,
					method: 'GET',
					data: {
						villageId: this.villageId,
					},
					success: e => {
						console.log(e.data.data.result[0].villageName)
						this.villageName = e.data.data.result[0].villageName + '项目端'
						uni.setNavigationBarTitle({
							title: this.villageName
						})
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			changeVillage(id, index) {
				this.showVillageList = false
				this.selectVillageIndex = index
				this.villageId = id
				this.getData()
			},
			// 获取头部数据
			getHomeTopData() {
				const date = new Date()
				uni.request({
					url: this.url + '/largescreen/Hometop?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						year: date.getFullYear(),
						month: date.getMonth() + 1,
						sensitive: this.sensitive,
					},
					success: e => {
						console.log(e.data.data)
						this.homeTopData = e.data.data
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 获取车流数据
			getVehicleaccessData() {
				uni.request({
					url: this.url + '/largescreen/Vehicleaccess?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						isOperation:0,
						villageId: this.villageId,
						year: this.yearList[this.clllTime[0]],
						month: this.monthList[this.clllTime[1]],
						sensitive: this.sensitive,
					},
					success: e => {
						console.log(e.data.data)
						const data = e.data.data
						this.clllEchartOption.xAxis.data = data.xAxis
						this.clllEchartOption.series[0].data = data.yAxis_InCar
						this.clllEchartOption.series[1].data = data.yAxis_OutCar
						this.clllEchartOption.series[2].data = data.yAxis_Practical
						this.clllEchartOption.series[3].data = data.yAxis_Discounts
						this.clllEchartHear = {
							discountsAmount: data.discountsAmount,
							monthInCount: data.monthInCount,
							monthOutCount: data.monthOutCount,
							practicalAmount: data.practicalAmount,
							todayInCount: data.todayInCount,
							weekInCount: data.weekInCount,
						}
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			showClllTimeFn() {
				this.showClllTime = !this.showClllTime
				this.getVehicleaccessData()
			},
			showRcglTimeFn() {
				this.showRcglTime = !this.showRcglTime
				this.getInvestigateData()
				this.getPunchRecordData()
			},
			showRcglYearMonthFn(boolean) {
				this.showRcglYearMonth = boolean
				this.getInvestigateData()
				this.getPunchRecordData()
			},
			changeClllTime({
				detail: {
					value
				}
			}) {
				this.clllTime = value
			},
			changeTsjyTime({
				detail: {
					value
				}
			}) {
				this.tsjyTime = value
				this.getSuggestData()
			},
			changeRcglTime({
				detail: {
					value
				}
			}) {
				this.rcglTime = value
			},
			// 获取投诉建议数据
			getSuggestData() {
				uni.request({
					url: this.url + '/largescreen/Suggest?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						isOperation:0,
						villageId: this.villageId,
						year: this.yearList[this.tsjyTime[0]],
						month: this.monthList[this.tsjyTime[1]],
						sensitive: this.sensitive,
					},
					success: e => {
						const data = e.data.data
						this.swiperList = data.list
						console.log(data)
						this.tsjyHeadData = {
							total: data.total,
							assigned: data.assigned,
							followUp: data.followUp,
							finish: data.finish,
							overdue: data.overdue,
						}



						let arr = []
						if (data.assigned != 0) {
							arr.push({
								value: data.assigned,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							})
						}
						if (data.followUp != 0) {
							arr.push({
								value: data.followUp,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							})
						}
						if (data.finish != 0) {
							arr.push({
								value: data.finish,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							})
						}
						if (data.overdue != 0) {
							arr.push({
								value: data.overdue,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							})
						}
						
						this.tsjyEchartLeftOption.series[0].data = arr;

						this.tsjyEchartLeftOption.series[1].data = []
						for (let i = 0; i < data.subTypeGroup.length; i++) {
							this.tsjyEchartLeftOption.series[1].data[i] = {
								value: data.subTypeGroup[i].value,
								name: data.subTypeGroup[i].name,
								itemStyle: {
									color: data.subTypeGroup[i].color
								}
							}
						}
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 获取日常管理数据
			getInvestigateData() {
				uni.request({
					url: this.url + '/largescreen/Investigate?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						isOperation:0,
						villageId: this.villageId,
						year: this.yearList[this.rcglTime[0]],
						month: this.showRcglYearMonth ? this.monthList[this.rcglTime[1]] : -1,
						sensitive: this.sensitive,
					},
					success: e => {
						console.log(e.data.data)
						const data = e.data.data
						this.rcglHeadData = {
							todayCount: data.todayCount,
							weekCount: data.weekCount,
							monthCount: data.monthCount,
						}

						let arr = []
						if (data.assigned != 0) {
							arr.push({
								value: data.assigned,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							})
						}
						if (data.followUp != 0) {
							arr.push({
								value: data.followUp,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							})
						}
						if (data.finish != 0) {
							arr.push({
								value: data.finish,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							})
						}
						if (data.overdue != 0) {
							arr.push({
								value: data.overdue,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							})
						}
						
						this.rcglEchartLeftOption.series[0].data = arr;

						this.rcglEchartRightOption.series[0].data = []
						for (let i = 0; i < data.subTypeGroup.length; i++) {
							this.rcglEchartRightOption.series[0].data[i] = {
								value: data.subTypeGroup[i].value,
								name: data.subTypeGroup[i].name,
								itemStyle: {
									color: data.subTypeGroup[i].color
								}
							}
						}

					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 获取逾期数据
			getOverdueData(villageId, type) {
				let date = new Date()
				let year = date.getFullYear() //获取完整的年份(4位)
				let month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
				uni.request({
					url: this.url + '/largescreen/GetOverdueList?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						// isOperation:0,
						villageId: villageId,
						pageNum: this.nowPage,
						pageSize: this.pageSize,
						type: type,
						// year: year,
						// month: 11,
						sensitive: this.sensitive,
					},
					success: e => {
						if (type == 1) {
							this.overdueList = e.data.data.result;
							this.total = e.data.data.totalNum;
							// console.log(this.overdueList)
						} else {
							this.dateOverdueList = e.data.data.result;
							this.dateTotal = e.data.data.totalNum;
							// console.log(this.dateOverdueList)
							// debugger
						}

					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 获取巡更数据
			getPunchRecordData() {
				uni.request({
					url: this.url + '/largescreen/PunchRecord?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						year: this.yearList[this.rcglTime[0]],
						month: this.showRcglYearMonth ? this.monthList[this.rcglTime[1]] : -1,
						sensitive: this.sensitive,
					},
					success: e => {
						const data = e.data.data
						console.log(data.xAxis)
						console.log(data.yAxis)

						this.rcglEchartBottomOption.xAxis.data = data.xAxisT
						this.rcglEchartBottomOption.series[0].data = data.yAxisT
					},
					fail: e => {
						console.log(e)
					}
				})
			},

			getTime() { // 获取时间
				const wMap = ['日', '一', '二', '三', '四', '五', '六', ]
				const date = new Date()
				const y = date.getFullYear()
				const m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
				const d = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
				const w = wMap[date.getDay()]
				const h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
				const min = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
				const s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
				this.time = h + ':' + min + ':' + s
				this.date = y + '-' + m + '-' + d + ' 星期' + w
			},
			getTemperature() { // 设置温度
				uni.request({
					url: "https://restapi.amap.com/v3/weather/weatherInfo?key=ecd60baf0cc86faf25642730ff682823&city=%E4%B8%AD%E5%B1%B1%E5%B8%82&extensions=base",
					success: (e) => {
						this.weather = e.data.lives[0].weather;
						this.temperature = e.data.lives[0].temperature_float + '­°C'
						// console.log('e', e);
					}
				})
			},
			openWindows(type) { // 打开投诉建议/日常管理
				this.openType = type;
				if (type == 1) {
					this.detailStatus = true;
				} else {
					this.detailDateStatus = true;
				}
			},
			getQueryVariable(variable) {
				var query = window.location.href.substring(window.location.href.indexOf('?') + 1);
				console.log(query)
				console.log(window.location.href)
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == variable) {
						return pair[1];
					}
				}
				return (false);
			}
		}
	}
</script>

<style>
	@import url(@/static/project.css);
</style>